import React, { Component } from "react";

// 从react-dom里面解构createPortal，用于将子组件渲染到我们想要的地方
import { createPortal } from "react-dom";

class Child extends Component {
  render() {
    // 里面有两个参数，第一个就是组件，第二个是需要挂载到的那个元素
    // 一般就是需要给元素进行全局定位的时候，比如会话框，小提示等
    return createPortal(
      <div className="child">child组件</div>,
      document.querySelector("body")
    );
  }
}

class App extends Component {
  state = {};
  render() {
    return (
      <div className="wrap">
        <h2>portal</h2>
        <Child />
      </div>
    );
  }
}

export default App;
